<template>
  <div class="passsword phone">
    <div class="pwd-header">
      <img src="~@/assets/img/logo2.png" alt="octopus" @click="$router.replace({ name: 'login' })" />
      <p>手机找回密码</p>
      <div class="login" @click="$router.replace({ name: 'login' })">
        <icon-svg name="iconUserName"></icon-svg> 登录
      </div>
    </div>
    <div class="pwd-content">
      <div class="content-wrap">
        <el-steps :active="step" finish-status="success" align-center>
          <el-step title="步骤 1" description="验证身份,重设登录密码"></el-step>
          <el-step title="步骤 3" description="完成"></el-step>
        </el-steps>
        <div v-if="step === 0">
          <div class="item-title">
            <p>尊敬的 【{{ loginUname }}】 ，您正在找回密码，请确认您预留的手机号码：</p>
            <p>您预留的手机号码是{{ phone }}</p>
          </div>
          <el-form
            ref="editForm"
            :model="editForm"
            :rules="editFormRules"
            label-width="140px"
            @keyup.enter.native="onSubmit()"
          >
            <el-form-item label="新的登录密码" prop="password">
              <el-input v-model="editForm.password" type="password" placeholder="请输入新的登录密码"></el-input>
            </el-form-item>
            <el-form-item label="确认新的登录密码" prop="newPassword">
              <el-input v-model="editForm.newPassword" type="password" placeholder="请输入新的登录密码"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <div class="clearfix">
                <div class="code-input">
                  <el-input v-model="editForm.code" placeholder="请输入验证码"></el-input>
                </div>
                <div class="code-img">
                  <el-button :type="sending ? 'info' : 'primary'" @click="sendMessage">
                    {{ sending ? sendTime + '秒后可重新发送' : '发送短信验证码' }}
                  </el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="密码强度">
              <el-progress
                :percentage="pasStrength.progress"
                :show-text="false"
                :stroke-width="12"
                :class="'psd-strength' + pasStrength.level"
              ></el-progress>
              <span class="pas-strength">
                安全级别：<span :class="'psd-strength' + pasStrength.level">{{ pasStrength.label }}</span>
              </span>
            </el-form-item>
            <el-row>
              <el-col :span="24" align="right">
                <div class="tips">建议使用数字、字母和字符的组合密码，提高密码安全等级</div>
              </el-col>
            </el-row>
            <el-form-item align="right">
              <el-button @click="$router.back()">上一步</el-button>
              <el-button type="primary" @click="onSubmit">下一步</el-button>
            </el-form-item>
          </el-form>
          <div class="tips">
            <p>没收到短信验证码？</p>
            <p>1.网络通讯异常可能会造成短信丢失，请重新获取或稍后再试。</p>
            <p>2.请核实手机是否已欠费停机，或者屏蔽了系统短信。</p>
            <p>3.如果手机已丢失或停用，请选择其他验证方式。</p>
            <p>4.您也可以尝试将SIM卡移动到另一部手机，然后重试。</p>
          </div>
        </div>
        <div v-else-if="step === 1" class="step2">
          <i class="el-icon-success"></i>
          <p>恭喜您，重设密码成功，请<span @click="logout">重新登录</span></p>
          <p class="orange">{{ logTime }}秒后自动跳到登录界面</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import utils from '@/plugins/utils'
export default {
  data() {
    return {
      step: 0,
      sending: false,
      sendTime: 60,
      logTime: 3,
      phone: '',
      editForm: {
        password: '',
        newPassword: '',
        code: ''
      },
      editFormRules: {
        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        newPassword: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      },
      pasStrength: {
        level: 0,
        progress: 0,
        label: '弱'
      }
    }
  },
  created() {
    this.loginUname = this.$route.query.loginUname
    this.getPhone()
  },
  watch: {
    'editForm.password'(val) {
      let progress = utils.checkStrong(val)
      switch (progress) {
        case 0:
          this.pasStrength.level = 1
          this.pasStrength.progress = 10
          this.pasStrength.label = '很弱'
          break
        case 1:
          this.pasStrength.level = 1
          this.pasStrength.progress = 25
          this.pasStrength.label = '弱'
          break
        case 2:
          this.pasStrength.level = 2
          this.pasStrength.progress = 50
          this.pasStrength.label = '中'
          break
        case 3:
          this.pasStrength.level = 3
          this.pasStrength.progress = 75
          this.pasStrength.label = '强'
          break
        case 4:
          this.pasStrength.level = 4
          this.pasStrength.progress = 100
          this.pasStrength.label = '很强'
          break
      }
    }
  },
  methods: {
    getPhone() {
      this.$ajax({
        url: this.$ajax.setUrl(`auth/authPwdEdit/mobile/${this.loginUname}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data) this.phone = data.data
          else
            this.$message({
              message: '暂未设置预留手机号，请选择其他公式或联系管理员',
              onClose: () => {
                this.$router.go(-1)
              }
            })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    sendMessage() {
      if (this.sending) return
      this.$ajax({
        url: this.$ajax.setUrl(`auth/authPwdEdit/pwdSendShortMsg/${this.loginUname}`),
        method: 'post',
        data: this.$ajax.setData()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.data || data.msg)
          this.sendTimer = setInterval(() => {
            this.sending = true
            this.sendTime--
            if (this.sendTime <= 0) {
              clearInterval(this.sendTimer)
              this.sending = false
            }
          }, 1000)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    onSubmit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          if (this.pasStrength.level < 2) {
            this.$message.error('密码强度不足，请重新输入')
            return
          }
          if (this.editForm.password !== this.editForm.newPassword) {
            this.$message.error('两次输入的密码不一致')
            return
          }
          this.$ajax({
            url: this.$ajax.setUrl('auth/authPwdEdit/pwdByShortMsg'),
            method: 'post',
            data: this.$ajax.setData({
              code: this.editForm.code,
              userNm: this.loginUname,
              newLoginPwd: this.editForm.password,
              pwdStrong: this.pasStrength.level
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.step++
              this.timer = setInterval(() => {
                this.logTime--
                if (this.logTime <= 0) {
                  clearInterval(this.timer)
                  this.logout()
                }
              }, 1000)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    logout() {
      if (this.timer) clearInterval(this.timer)
      this.$router.replace({ name: 'login' })
    }
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
    this.sendTimer && clearInterval(this.sendTimer)
  }
}
</script>

<style lang="scss">
.phone {
  .pwd-content {
    margin-top: 0;
  }
  .el-form {
    width: 500px;
    margin: 20px auto;
    .code-input {
      width: 60%;
      float: left;
    }
    .code-img {
      width: 40%;
      text-align: right;
      float: left;
      .el-button {
        width: 140px;
      }
    }
    .el-progress {
      display: inline-block;
      width: 55%;
    }
    .pas-strength {
      display: inline-block;
      width: 40%;
      text-align: right;
    }
  }
  .tips {
    margin-top: 50px;
    padding: 10px 20px;
    border: 1px solid #c4d7e3;
    background-color: #ebf2f6;
    text-align: left;
    border-radius: 10px;
  }
  .step2 {
    margin-top: 100px;
    i {
      font-size: 100px;
      color: #20b759;
      margin-bottom: 20px;
    }
    p {
      line-height: 30px;
      span {
        color: #3d81ee;
        cursor: pointer;
        margin-left: 10px;
      }
      &.orange {
        color: #ff7a3f;
      }
    }
  }
}
</style>
